<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面预览</title>
    <!-- 引入jQuery -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <!-- 引入Handlebars模板引擎 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            /* padding: 15px; */
        }
        #pageContent {
            border: 1px solid #eee;
            /* padding: 15px; */
            min-height: 300px;
        }
        .loading {
            text-align: center;
            padding: 30px;
            font-size: 18px;
            color: #666;
        }
        .error {
            text-align: center;
            padding: 30px;
            font-size: 18px;
            color: #ff0000;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- <h1 id="pageTitle">页面加载中...</h1> -->
        <div id="pageContent">
            <div class="loading">页面内容加载中，请稍候...</div>
        </div>
    </div>

    <script>
        $(function() {
            // 从URL获取页面键名
            // 修改从URL查询参数获取pageKey
            const urlParams = new URLSearchParams(window.location.search);
            const pageKey = urlParams.get('pageKey');
            
            // 如果没有页面键名，显示错误
            if (!pageKey) {
                showError('未指定页面标识');
                return;
            }
            
            // 加载页面配置
            loadPageConfig(pageKey);
        });
        
        // 加载页面配置
        function loadPageConfig(pageKey) {
            // 使用正确的API地址格式
            const baseUrl = '/dev-api';
            $.ajax({
                url: baseUrl + '/api/preview/' + pageKey,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (response.code === 200) {
                        renderPage(response.pageConfig);
                    } else {
                        showError(response.msg || '加载页面失败');
                    }
                },
                error: function(xhr, status, error) {
                    showError('请求失败: ' + error);
                    console.error('错误详情:', xhr.responseJSON);
                }
            });
        }
        
        // 渲染页面
        function renderPage(pageConfig) {
            // 设置页面标题
            $('#pageTitle').text(pageConfig.title);
            document.title = pageConfig.title;
            
            // 加载对应的模板
            loadTemplate(pageConfig.templateId, function(template) {
                if (!template) {
                    showError('模板加载失败');
                    return;
                }
                
                try {
                    // 解析配置JSON
                    const config = JSON.parse(pageConfig.config);
                    
                    // 编译模板
                    const compiledHtml = compileTemplate(template, config);
                    
                    // 更新页面内容
                    $('#pageContent').html(compiledHtml);
                    
                    // 加载样式和脚本
                    applyStyleAndScript(template, config);
                } catch (e) {
                    showError('渲染页面失败: ' + e.message);
                    console.error(e);
                }
            });
        }
        
        // 加载模板
        function loadTemplate(templateId, callback) {
            const baseUrl = '/dev-api';
            $.ajax({
                url: baseUrl + '/system/pageTemplate/' + templateId,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (response.code === 200) {
                        callback(response.data);
                    } else {
                        callback(null);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('模板加载失败:', xhr.responseJSON);
                    callback(null);
                }
            });
        }
        
        // 编译模板
        function compileTemplate(template, config) {
            // 使用Handlebars编译模板
            const compiledTemplate = Handlebars.compile(template.htmlContent);
            return compiledTemplate(config);
        }
        
        // 应用样式和脚本
        function applyStyleAndScript(template, config) {
            // 添加CSS
            if (template.cssContent) {
                const styleId = 'style-' + template.id;
                if (!document.getElementById(styleId)) {
                    const styleElement = document.createElement('style');
                    styleElement.id = styleId;
                    styleElement.textContent = template.cssContent;
                    document.head.appendChild(styleElement);
                }
            }
            
            // 添加JavaScript
            if (template.jsContent) {
                try {
                    // 创建一个安全的js执行环境
                    const scriptElement = document.createElement('script');
                    scriptElement.textContent = template.jsContent;
                    document.body.appendChild(scriptElement);
                } catch (e) {
                    console.error('执行脚本错误:', e);
                }
            }
        }
        
        // 显示错误信息
        function showError(message) {
            $('#pageContent').html('<div class="error">' + message + '</div>');
        }
    </script>
</body>
</html> 